<template>
    <div id="content">
        <div id="img"></div>
        <div id="box">
            <span style="font-size: 22px;color: #333;">妆造风格</span><br>
            <span style="color: #999;font-size: 15px;border-bottom: 3px solid red;padding-bottom: 10px;">
                Makeupstyle
            </span>
        </div>

        <div id="imgContent">
            <div class="img-tem" v-for="item in rougeList" :key="item.id">
                <img :src="item.pic" class="img-with-effect">
                <p>{{ item.type }}</p>
                <span style="font-size: 13px;color: #999;position: relative;top: -15px;">{{ item.info }}</span><br> 
                <span style="font-size: 15px;color: red;position: relative;top: -15px;">￥{{ item.price }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import api from '@/api/style';

const rougeList = ref([])

//访问后台数据库中存储信息,做处理
api.getStyleAll().then(res=>{
    for (let i = 0; i < res.data.data.length; i++) {
       if(res.data.data[i].version == "上架"){
        rougeList.value.push(res.data.data[i])
       } 
    }
})

</script>

<style scoped>
#content {
    width: 100%;
    height: auto;
}

#box {
    text-align: center;
    height: auto;
    margin-top: 50px
}

.link {
    text-decoration: none;
    color: #333;
}

#img {
    background-image: url("../../images/rouge-01.jpeg");
    background-size: cover;
    height: 570px;
    width: 100%;
}
.img-with-effect {
    transition: opacity 0.3s ease; /* 同时设置滤镜和透明度变化的过渡效果 */
}
.img-with-effect:hover {
    filter: opacity(0.9); 
}
.img-tem {
    margin-left: 50px;
    text-align: center;
    box-shadow: 0 0 1px rgb(0 0 0);
    margin-top: 50px;
}

.img-tem img {
    width: 400px;
    height: 250px;
    object-fit: cover;
    object-position: center; /* 确保图片在容器中居中显示 */
}

#imgContent {
    width: 1400px;
    height: auto;
    margin-left: 60px;
    flex-wrap: wrap;
    display: flex;
    margin-top: 50px;
    margin-bottom: 80px;
}
</style>